<template>
  <div>
    <my-container title="告警详情">
      <info-wrapper title="告警详情">
        <el-row>
          <el-col v-for="item in cardOne" :key="item.prop" :span="12">
            <el-col :span="8">{{ item.label }}</el-col>
            <el-col :span="16">{{ formData[item.prop] }}</el-col>
          </el-col>
        </el-row>
      </info-wrapper>
      <info-wrapper title="告警处理">
        <el-row>
          <el-col v-for="item in cardTwo" :key="item.prop" :span="12">
            <el-col :span="8">{{ item.label }}</el-col>
            <el-col :span="16">{{ formData[item.prop] }}</el-col>
          </el-col>
        </el-row>
      </info-wrapper>
    </my-container>
  </div>
</template>

<script>
import MyContainer from '@/components/my-container'
import InfoWrapper from '@/components/info-wrapper.vue'
import { getWarnDetailAPI } from '@/api/warnList.js'
const statusArr = ['未派单', '已派单', '已接单', '已完成']
export default {
  components: {
    MyContainer, InfoWrapper
  },
  data() {
    return {

      formData: {},
      cardOne: [
        { label: '告警时间：', prop: 'warningTime' },
        { label: '一体杆名称：', prop: 'poleName' },
        { label: '告警区域：', prop: 'areaName' },
        { label: '一体杆编号：', prop: 'poleNumber' },
        { label: '故障类型：', prop: 'errorType' },
        { label: '处置状态：', prop: 'handleStatus' }
      ],
      cardTwo: [
        { label: '处理人：', prop: 'handleUser' },
        { label: '联系方式：', prop: 'phonenumber' },
        { label: '处理结果：', prop: 'handleResult' },
        { label: '完成时间：', prop: 'handleTime' }
      ]
    }
  },
  async created() {
    this.formData = await getWarnDetailAPI(this.$route.params.id)
    statusArr.forEach((item, i) => {
      if (this.formData.handleStatus === i) {
        this.formData.handleStatus = item
      }
    })
  }
}
</script>

<style>
.el-col-8{
  padding: 0px;
  color: #909399;
  text-align: right!important;
  margin-bottom: 30px;
}
.el-col-16{
  padding-left: 10px;
  text-align: left;
  color: #262626;
}
</style>
